<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="example">{{message}}</div>
    <script type="text/javascript">
      var vm = new Vue({
          el: '#example',
          data: {
              message: '123'
          }
      });
      vm.message = 'new message';

      Vue.component('example',{
          template:'<span>{{ message }}</span>',
          data: function(){
              return {
                  message: 'not updated'
              }
          },
          methods: {
              updateMessage: function(){
                  this.message = 'updated';
                  console.log(this.$el.textContent);
                  this.$nextTick(function(){
                      console.log(this.$el.textContent);
                  })
              }
          }
      });
    </script>

    <style type="text/css">
    .fade-enter-active, .fade-leave-active {
        transition: opacity .5s
    }
    .fade-enter, .fade-leave-active {
        opacity: 0
    }
    </style>
    <div id="demo">
        <button v-on:click='show=!show'>
            Toggle
        </button>
        <transition name='fade'>
            <p v-if='show'>Hello</p>
        </transition>
    </div>
    <script type="text/javascript">
        new Vue({
            el: '#demo',
            data: {
                show: true
            }
        });
    </script>
    <div id="anchored-heading">
        <anchored-heading :level="2">Hello world!</anchored-heading><br/>
    </div>
    <script type="text/javascript">
        Vue.component('anchored-heading', {
            render: function(createElement){
                return createElement(
                    'h' + this.level,
                    this.$slots.default
                )
            },
            props: {
                level: {
                    type: Number,
                    required: true
                }
            }
        });

        new Vue({
            el: 'anchored-heading'
        })
    </script>

    <input type="text" id="focus_text" v-focus />
    <script type="text/javascript">
        Vue.directive('focus',{
            inserted: function(el){
                el.focus();
            }
        });

        new Vue({
            el: '#focus_text'
        })
    </script>
</body>
</html>
